<script>
import { queryHmDelVerifiRows, saveHmDelVerifiRows } from '@/api/user';
import DialogVerify from '../dialog/dialog-verify';

export default {
  name: 'ComPlatformVerify',
  components: {
    DialogVerify,
  },
  shulan: true,
  props: {
    houDelId: {
      type: String,
      default: '',
    },
    noPortAccount: Number | String,
    exception: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      headerData: {},
      bodyList: [],
      verifyVisible: false, //我的核验信息弹层
      modifiedCount: 2
    };
  },
  render() {
    const { verifyVisible, houDelId } = this;
    let header = (this.headerData.columns || [])
      .filter((item) => !item.hidden)
      .map((item, i, array) => {
        i = (i == 0 || i == array.length - 1) ? 1 : 2;
        return <div class={['cell-item', `flex-${i}`]}>{this.createElementByType(item)}</div>;
      });

    let bodys = this.bodyList.map((item) => {
      return <div class="d-flex">{this.createBodyItems(item.columns, item.code)}</div>;
    });

    if (bodys.length == 0) {
      return null;
    }

    return (
      <div class="table-body text-gray bold fs-md">
        <div class="header-title d-flex">{header}</div>
        {bodys}
        <dialog-verify
          houDelId={houDelId}
          verifyVisible={verifyVisible}
          on={{ onHideVerify: () => (this.verifyVisible = false) }}
        ></dialog-verify>
      </div>
    );
  },
  created() {},
  mounted() {},
  watch: {
    houDelId: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.initRender(newValue);
      },
    },
    bodyList: {
      deep: true,
      handler(newVal) {
        this.modifiedCount--;
      },
    },
  },
  computed: {},
  methods: {
    initRender(id) {
      queryHmDelVerifiRows({ id }).then((content) => {
        if (!content || content.length == 0) {
          this.$emit('onHideComPlatformVerify');
          return;
        }

        content.forEach((item) => (item.delId = this.houDelId));
        if (this.exception) {
          content.forEach((item) => {
            item.columns = item.columns.filter((v) => v.code != "options")
          })
        }
        this.headerData = content.find((item) => item.type === 'header');
        this.bodyList = content.filter((item) => item.type === 'body');
      });
    },
    createBodyItems(bodyItemColumns, code) {
      let bodys = bodyItemColumns
        .filter((item) => !item.hidden)
        .map((item, i, array) => {
          i = (i == 0 || i == array.length - 1) ? 1 : 2;
          return <div class={['cell-item', `flex-${i}`]}>{this.createElementByType(item, code)}</div>;
        });

      return bodys;
    },
    createElementByType(item, code) {
      switch (item.type) {
        case 'text':
          return <span>{item.value}</span>;
          break;
        case 'input':
          return <el-input size="mini" placeholder="请输入核验码" v-model={item.value}></el-input>;
          break;
        case 'button':
          return (
            <el-button size="mini" type="primary" onClick={this.clickHandler.bind(this, code)}>
              {item.value}
            </el-button>
          );
          break;

        default:
          break;
      }
    },

    clickHandler(code) {
      this.verifyVisible = true;
      this.$bus.$once('verify-selected', (e) => {
        if (!e) return;

        let bodyItem = this.bodyList.find((v) => v.code == code);
        let columns = bodyItem.columns;

        Object.values(e.columns).forEach((item) => {
          if (item.templateIndex > -1) {
            columns[item.templateIndex].value = item.value;
          }
        });
      });
    },
    save() {
      if (this.modifiedCount > 0) return Promise.resolve()
      if (this.bodyList == 0) {
        return Promise.resolve();
      }
      let result = [this.headerData, ...this.bodyList];
      return saveHmDelVerifiRows(result).then(() => {
        this.initRender(this.houDelId);
      });
    },
  },
};
</script>
<style scoped>
.header-title {
  background: #edf6ff;
  line-height: 28px;
}
.cell-item {
  padding: 5px 10px;
  line-height: 28px;
}
</style>
